import React from "react"
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from '../redux/count_slice'
import { addRow, deleteRow } from '../redux/list_slice'

function Count () {
  // 通过store获取对应的reducer中的state对象
  const count = useSelector((state) => state.count.value)
  const lists = useSelector((state) => state.list.value)
  // 派遣actions事件
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button onClick={() => dispatch(increment())}>＋</button>
        <span>{count}</span>
        <button onClick={() => dispatch(decrement())}>-</button>
      </div>
      <br />
      <ul>
        {
          lists.map((item) => (
            <li key={item.id}>
              姓名：{item.name}，年龄：{item.age}
              <button
                onClick={() => dispatch(deleteRow({ 'id': item.id }))}
              >删除</button>
            </li>)
          )
        }
      </ul>
      <button onClick={() => dispatch(addRow())}>添加</button>
    </div>
  )
}

export default Count